.case {
   width: 300px;
   height: 500px;
   border-radius: 5px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-image: var(--speaker-bg);
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.8),
       inset 0 1px 1.5px rgba(255, 255, 255, 0.6),
       inset 0 2px 5px rgba(255, 255, 255, 0.2),
       inset 0 -1px 1.5px rgba(0, 0, 0, 0.4),
       inset 0 -2.5px 4px rgba(0, 0, 0, 0.2),
       inset 2px 0 4px rgba(0, 0, 0, 0.25),
       inset -2px 0 4px rgba(0, 0, 0, 0.25),
       inset 0 0 6px rgba(120,255,190,.55),
       inset 0 0 14px rgba(0,255,120,.35),
       0 0 10px rgba(0,255,120,.45);
}
.case.boom {
   animation: boomCase 500ms infinite;
}
.case.boom .rd:before {
   animation: boom2 500ms infinite;
}
.case.boom .rd:after {
   animation: boom1 500ms infinite;
}
.case.boom .brand {
   animation: boomBrand 500ms infinite;
}
.case .brand {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   top: 22px;
   color: #dadada;
   text-align: center;
   width: 300px;
   left: 0;
   z-index: 22;
   font-family: 'Yellowtail', cursive;
   color: #dadada;
   font-size: 25px;
   text-shadow: 1px 1px 1px #000;
   transform: scale(1);
}
.rd {
   margin: 0 auto;
   background: #39ff9b;
   box-shadow: inset 0px 0px 3px 3px rgba(0, 0, 0, .4);
   position: relative;
}
.rd#sm {
   width: 120px;
   height: 120px;
   border-radius: 5px;
   border-radius: 100%;
   margin-top: 65px;
   border: 10px solid #1a1a1a;
}
.rd#big {
   margin-top: 30px;
   width: 200px;
   height: 200px;
   border-radius: 5px;
   border-radius: 100%;
   border: 15px solid #1a1a1a;
}
.rd:before {
   content: '';
   width: 80%;
   height: 80%;
   border-radius: 5px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 100%;
   display: block;
   background: #3e4243;
   background-image: linear-gradient(to top left, #3e4243 10%, #252a2b);
   box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .6);
   z-index: 1;
}
.rd:after {
   content: '';
   width: 35%;
   height: 35%;
   border-radius: 5px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 100%;
   display: block;
   background: #0f1010;
   background-image: radial-gradient(#303435 5%, #000);
   z-index: 3;
   box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .5);
}
@keyframes boom1 {
   0%, 100% {
     width: 35%;
     height: 35%;
     border-radius: 5px;
     border-radius: 100%;
  }
   20% {
     width: 40%;
     height: 40%;
     border-radius: 5px;
     border-radius: 100%;
     box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .3);
  }
}
@keyframes boom2 {
   0%, 100% {
     width: 80%;
     height: 80%;
     border-radius: 5px;
     border-radius: 100%;
  }
   20% {
     width: 82%;
     height: 82%;
     border-radius: 5px;
     border-radius: 100%;
     box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .7);
  }
}
@keyframes boomCase {
   0%, 100% {
     box-shadow: 0px 8px 10px 3px rgba(0, 0, 0, .2);
  }
   20% {
     box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, .7);
  }
}